﻿import React from 'react';
import { Link } from 'react-router-dom';
import { inject, observer } from "mobx-react";

@inject("UiStore")
@observer
export class Header extends React.Component {
    render() {
        const explorerUrl = this.props.UiStore.web3Store.explorerUrl || 'https://etherscan.io';
        const contractAddress = this.props.UiStore.web3Store.contractAddress;
        return (
            
            <header className="header">
                <div className="container">
                    <a href="http://batchsender.com" className="header-logo"><img src={require('../assets/images/logo.jpg')} /></a>
                    <div className="header_right">
                        <div>

                            <a href="https://coinsutra.com/use-metamask-wallet/" target="_blank" className="eth_help">How To Use MetaMask</a>
                            <a href="https://www.youtube.com/watch?v=6Gf_kRE4MJU" target="_blank" className="metamask_help">Video</a>
                            <a href="http://cn.batchsender.com" className="eth_help">中文</a>
                        </div>
                        <div className="clear"></div>
                        <form className="form form_header">
                            {}
                            <label htmlFor="network"
                                className="label">Contract: <a target="_blank" href={`${explorerUrl}/address/${contractAddress}`}>{contractAddress}</a>
                            </label>
                            {}
                            <div className="socials">
                                <a href="https://github.com/TopPoints" target="_blank" className="socials-i socials-i_github"></a>
                            </div>
                        </form>
                    </div>
                </div>
            </header>
        )
    }
}